跳到主要内容

把 Figma 设计转成代码

读取 Figma 设计上下文、组件和变量，把设计落到真实项目代码里。

场景定位​

这个案例属于“产品、设计与前端原型”。它适合把一个经常需要人工整理、判断或验证的流程交给 Codex 做第一轮处理，然后由你审阅关键结果。

项目内容
适合任务读取 Figma 设计上下文、组件和变量，把设计落到真实项目代码里。
常用能力Figma、设计系统、前端实现、视觉检查
产出形态清单、草稿、补丁、报告、截图、表格或可运行原型，取决于具体任务

适合谁​

  • 设计已经在 Figma 中完成
  • 需要把设计交付为生产代码
  • 团队有组件库和 token

Codex 可以帮你做什么​

  • 获取 Figma 节点和截图
  • 理解变量、样式和组件关系
  • 映射到代码组件
  • 实现后做视觉对照

推荐工作流​

  1. 先指定 Figma 节点或选区
  2. 让 Codex 搜索现有组件
  3. 说明哪些差异可以接受
  4. 实现后截图对比
  5. 把无法完全还原的地方列出来

示例提示词​

请读取这个 Figma 节点，并在当前项目中实现对应页面。优先使用已有组件和设计 token。如果设计与代码组件不完全一致，请说明取舍，并用截图验证最终效果。

案例重点展开​

  • 先确保 Figma 文件结构清楚，尽量使用 Auto Layout 和设计变量。
  • 让 Codex 从具体 Figma 选区开始，不要一次读取整个文件。
  • 提示词里写清设计来源、目标技术栈、复用组件和验证方式。
  • 实现后使用 Playwright 或截图对照检查。
  • 如果设计系统和代码系统冲突，要说明取舍而不是静默偏离。

完整用法拆解​

1. 先把任务范围说清楚​

这个案例的重点不是让 Codex 猜你的真实需求，而是把“读取 Figma 设计上下文、组件和变量，把设计落到真实项目代码里。”拆成一组可以检查的步骤。开始时先说明输入来源、时间范围、目标对象和最终产物。如果任务涉及多个工具，也要告诉 Codex 哪些工具可以读、哪些动作只能准备草稿。

可以把范围写成三句话：我要处理什么资料、希望得到什么结果、哪些事情不能自动执行。对于“产品、设计与前端原型”这类任务，范围越清楚，Codex 越容易把注意力放在真正有价值的判断上。

2. 让 Codex 先输出中间结果​

不要一上来要求最终答案。更稳妥的方式是先让 Codex 完成“获取 Figma 节点和截图”，再让它解释判断依据。这样你可以在中间阶段纠偏，避免它把不重要的信息写进最终产物。

如果任务比较长，可以要求 Codex 先给你一个小型样例，例如前 5 条记录、前 3 个页面、一个模块或一封邮件。样例通过后，再扩大到完整范围。

3. 把工具和证据写进交付物​

这个场景常用能力包括：Figma、设计系统、前端实现、视觉检查。让 Codex 使用这些能力时，最好要求它把依据也写出来：读了哪些文件、参考了哪些消息、运行了哪些命令、看到哪些截图或日志。

证据不是为了增加篇幅，而是为了让你能判断结果是否可靠。特别是 设计已经在 Figma 中完成，更应该看到来源、假设和未确认问题。

4. 逐轮校准，而不是一次到位​

第一次结果通常是校准样本。你可以告诉 Codex 哪些判断正确、哪些内容太泛、哪些边界必须更严格。经过几轮之后，再考虑把流程保存为技能、自动化或长期 goal。

一个可用的校准顺序是：先指定 Figma 节点或选区；让 Codex 搜索现有组件；最后 把无法完全还原的地方列出来。这样既能提高产出质量，也能减少误操作。

更多提示词案例​

入门版​

请读取这个 Figma 节点，并在当前项目中实现对应页面。优先使用已有组件和设计 token。如果设计与代码组件不完全一致，请说明取舍，并用截图验证最终效果。

请先只处理一个小范围样例，并说明你的判断依据、输出结构和需要我确认的问题。

进阶版​

请把“把 Figma 设计转成代码”作为一个完整工作流来执行。
目标：读取 Figma 设计上下文、组件和变量，把设计落到真实项目代码里。
可用能力：Figma、设计系统、前端实现、视觉检查
请按以下步骤进行：
1. 先确认输入来源和任务范围。
2. 输出执行计划和风险边界。
3. 生成第一版结果。
4. 标注每个关键结论的依据。
5. 列出需要我确认的问题。
不要执行发送、删除、付款、发布、承诺等不可逆动作。

复盘版​

请复盘刚才这次“把 Figma 设计转成代码”任务。
请输出：
1. 哪些输入最有用；
2. 哪些判断仍然不确定；
3. 哪些步骤可以下次自动化；
4. 哪些动作必须继续人工确认；
5. 下一次我应该怎样给你更好的上下文。

自动化前校准版​

我想把这个流程以后重复使用，但现在先不要自动化。
请根据本次任务整理一个可复用流程：触发条件、输入来源、处理步骤、输出格式、验证方式、停止条件和人工确认点。
尤其注意：Figma 到代码不是像素复制。

交付物检查清单​

完成这类任务后，建议检查以下内容：

  • 是否清楚说明了输入来源、处理范围和时间范围。
  • 是否把“获取 Figma 节点和截图”和“理解变量、样式和组件关系”的依据写出来。
  • 是否列出了不确定信息、缺失材料和需要你确认的问题。
  • 是否避免了越权动作，尤其是发送、删除、付款、发布、承诺和修改生产数据。
  • 是否留下了下一步可以继续执行的清单、文件、补丁、报告或验证结果。

使用边界​

  • Figma 到代码不是像素复制
  • 设计变量和代码 token 可能不一致
  • 需要真实浏览器验收